<template>
  <div class="home">
<!--    功能区域-->
    <div style="margin: 10px 0">
      <el-button type="danger" @click="openDialog">新增用户</el-button>
      <el-button type="danger">导入</el-button>
      <el-button type="danger">导出</el-button>


    </div>
<!--    搜素区域-->
    <div style="margin: 10px 0">
<!--@change事件可以获取当前改变的对象-->
      <el-select v-model="value" placeholder="Select" @change="optionClick($event)" >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"

        >
        </el-option>
      </el-select>
      <!--      清空按钮 clearable-->
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
<!--    <button @click="openhtml">tiao</button>-->
<!--    stripe斑马纹 sortable排序-->
<!--    创建表格-->
    <el-table :data="tableData" border stripe style="width: 100% ; " :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
      <el-table-column prop="userId" label="用户Id"  sortable />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="昵称"/>
      <el-table-column prop="ident" label="角色" :formatter="identFormat" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="操作" width="180" >
        <template #default="scope">
          <!--        插槽名.row可以获取一行的内容，-->
          <!--        如果要获取行的索引，使用插槽名.$index，注意$符号是必不可少的，否则将不起作用。-->
        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>

<!--          <el-popconfirm title="确定要删除吗">弹窗提示框确定要删除吗-->
<!--          @confirm事件单击确认按钮时触发-->
        <el-popconfirm title="确定要删除吗" @confirm="handleDelete(scope.row.userId)">
          <template #reference>
            <el-button type="text" size="small" >Delete</el-button>
          </template>
        </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

<!--    创建分页-->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

<!--    弹窗功能，弹窗里面创建表单-->
    <el-dialog v-model="dialogVisible" :title=title width="30%">

<!--      创建表单 弹窗里面的表单-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="form.ident" style="width: 80%" placeholder="请输入0(用户)或1(管理员)"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ref} from "vue";

export default {
  name: 'Home',
  data(){
    return{
      search :'',
      currentPage : 1,
      pageSize :10,
      total :0,
      option:'',
      title:'新增用户',
      //设置弹窗为false，不显示
      dialogVisible :false,
      options: ref([
        {
          value: 'user_id',
          label: 'userId',
        },
        {
          value: 'nick_name',
          label: 'nickName',

        },

      ]),
      value: ref(''),
      form :{

      },
      tableData: [
        {

        },

      ],

    }
  },
  created() {
    this.search = ''
    this.option = ''
    this.load()
  },
  methods :{

    //将后台查询的结果放到前台显示
    load(){

      request.get("/api/user",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          option :this.option

        }
      }).then(res=>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    //操作下的编辑按钮 修改数据
    handleEdit(row){
      console.log(row);
      // JSON.stringify()【从一个对象中解析出字符串】
      //JSON.parse()【从一个字符串中解析出json对象】
      //因为传入的row是一行对象，所以先将row解析成字符串，再将字符串解析成JSON对象
      this.title = '修改用户'
      this.form=JSON.parse(JSON.stringify(row))
      this.dialogVisible =true
    },

    //删除表格中的某一行
    handleDelete(id){

      request.delete('/api/user/'+id).then(res=>{
        console.log(res);
        if(res.code == '0'){
          this.$message({
            type : 'success',
            message :'删除成功'
          })
          this.dialogVisible = false
        }
        else {
          this.$message({
            type : 'error',
            message : res.msg
          })
        }
        this.load()
      })

    },

    //改变每页的个数 ,element-plus提供了改变之后pageSize的值
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()

    },
    //改变当前页 element-plus提供了改变之后pageNum的值
    handleCurrentChange(pageNum){

      this.currentPage = pageNum
      this.load()

    },

    //打开弹窗
    openDialog(){
      this.dialogVisible=true,
      this.form ={}
    },
    //插入数据
    save(){
      //如果表单里有id说明是更新操作，没有说明是插入操作
      if(this.form.userId){
        request.put('/api/user',this.form).then(res=>{
          console.log(res);
          if(res.code == '0'){
            this.$message({
              type : 'success',
              message :'更新成功'
            })
            this.dialogVisible = false
          }
          else {
            this.$message({
              type : 'error',
              message : res.msg
            })
          }
          this.load()
        })
        //重新刷新表格中的数据

      }
      else {
        request.post("/api/user",this.form
        ).then(res =>{
          console.log(res);
          if(res.code == '0'){
            this.$message({
              type : 'success',
              message :'插入成功'
            })
            this.dialogVisible = false
          }
          else {
            this.$message({
              type : 'error',
              message : res.msg
            })
          }
          this.load()
        })

      }


    },
    optionClick(id){
      this.option=id

    },
    identFormat(row){
      if(row.ident == 1){
        return '管理员';
      }else if(row.ident == 0){
        return '用户';
      }
    },
    // openhtml(){
    //   window.open(`/static/index.html`)
    // }

  },
  components: {


  },

}
</script>
